<template>
  <div class="w-full h-[100vh] bg-[#F9F9F8] relative overflow-hidden absolute">
    <div class="p-5 w-full h-full relative overflow-auto" v-if="!loading">
      <div class="bg-white w-full h-[28rem] rounded-xl p-5 flex flex-col">
        <div class="flex items-center justify-center">
          <img :src="getAssetsImageUrl('person.png')" alt="" class="w-6 h-6" />
          <div class="text-xs text-gray-400 ml-2">{{ currentRecordItem.username }}</div>
        </div>
        <div class="flex items-center justify-center mt-5">
          <div class="text-3xl font-semibold scale-y-110 flex items-center">
            <span class="mr-2">{{ currentRecordItem.payType === 1 ? "-" : "+" }}</span>
            <span style="font-family: 'DIN-MEDIUM'">¥{{ realTotalMoney }}</span>
            <van-icon name="question-o" color="#D1D5DB" size="18" class="ml-2" />
          </div>
        </div>
        <div class="flex items-center justify-center mt-5">
          <div class="text-xs text-gray-400 flex items-center">
            <span>余额</span>
            <span>¥</span>
            <span style="font-family: 'DIN-MEDIUM'">{{ formatPrice(totalMoney) }}</span>
          </div>
        </div>
        <div class="flex flex-col mt-8">
          <div class="flex text-sm h-8 w-full mb-3">
            <div class="flex-1 text-gray-400">交易卡号</div>
            <div>一卡通{{ hideCard }}</div>
          </div>
          <div class="flex text-sm h-8 w-full mb-3">
            <div class="flex-1 text-gray-400">交易时间</div>
            <div>
              {{
                new Date().getFullYear() +
                "-" +
                currentRecordItem.currentDate![0] +
                "-" +
                currentRecordItem.currentDate![1] +
                " " +
                currentRecordItem.dealTime +
                ":" +
                (Math.round(Math.random() * (60 - 1)) + 1)
              }}
            </div>
          </div>
          <div class="flex text-sm h-8 w-full mb-3">
            <div class="flex-1 text-gray-400">{{ currentRecordItem.payType === 1 ? "收款银行" : "付款银行" }}</div>
            <div>{{ currentRecordItem.bank }}</div>
          </div>
          <div class="flex text-sm h-8 w-full mb-3">
            <div class="flex-1 text-gray-400">{{ currentRecordItem.payType === 1 ? "收款账号" : "付款账号" }}</div>
            <div>{{ payAccount }}</div>
          </div>
          <div class="flex text-sm h-8 w-full mb-3">
            <div class="flex-1 text-gray-400">转账附言</div>
            <div>{{ currentRecordItem.bz }}</div>
          </div>
          <div class="flex text-sm h-8 w-full mb-3">
            <div class="flex-1 text-gray-400">银行交易类型</div>
            <div>{{ currentRecordItem.payType === 1 ? "转账汇款" : "汇入汇款" }}</div>
          </div>
        </div>
      </div>
      <div class="w-full bg-white h-12 p-5 my-3 flex items-center rounded-xl">
        <div class="text-sm text-gray-400 flex-1">转账福利</div>
        <div class="text-sm">2888元体验金，待领取></div>
      </div>
      <div class="bg-white w-full flex flex-col h-60 rounded-xl p-5 flex flex-col mt-3 mb-30">
        <div class="w-full flex h-8 text-sm mb-3 items-center">
          <div class="text-gray-400 flex-1">分类</div>
          <div class="flex items-center">
            <img :src="getAssetsImageUrl('wxzz.png')" alt="" class="w-6 h-6" />
            <div class="mx-3">{{ currentRecordItem.payType === 1 ? "转账给他人" : "他人转入" }}</div>
            <van-icon name="arrow" size="16" color="#A0A7B3" />
          </div>
        </div>
        <div class="w-full flex h-8 text-sm mb-3 items-center">
          <div class="text-gray-400 flex-1">所属账本</div>
          <div class="flex text-gray-400 items-center font-semibold">
            <div class="mx-3">请选择</div>
            <van-icon name="arrow" size="16" />
          </div>
        </div>
        <div class="w-full flex h-8 text-sm mb-3 items-center">
          <div class="text-gray-400 flex-1">不计入本月收支</div>
          <van-switch v-model="checked" size="20" inactive-color="rgba(	247,247,247, 0.9)" />
        </div>
        <div class="w-full flex h-8 text-sm mb-3 flex-col">
          <div class="text-gray-400 flex-1">备注</div>
          <div class="flex items-center mt-3">
            <div class="flex-1 flex justify-start text-gray-200">记录点什么...</div>
            <img :src="getAssetsImageUrl('camre.png')" alt="" class="w-5 h-5" />
          </div>
          <van-divider />
        </div>
      </div>
    </div>
    <div class="w-full h-56 text-sm flex flex-col items-center justify-center" v-else>
      <van-loading type="spinner" />
      <div>加载中，请稍等</div>
    </div>
    <div class="w-full h-16 bg-white fixed bottom-0 flex items-center" v-if="!loading">
      <div class="flex-1 flex items-center justify-center text-blue-400">给TA转账</div>
      <van-divider vertical />
      <div class="flex-1 flex items-center justify-center text-blue-400">查看往来记录</div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from "/@/store/modules/user";
  import { formatPrice } from "/@/utils/util";
  const userStore = useUserStore();
  const checked = ref<boolean>(false);
  const currentRecordItem = computed(() => userStore.getCurrentRecordItem);
  const totalMoney = computed(() => userStore.getBalance);
  const loading = ref<boolean>(false);

  onMounted(async () => {
    await nextTick();
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  });

  const realTotalMoney = computed(() => formatPrice(currentRecordItem.value.money));
  const hideCard = computed(
    () => currentRecordItem.value.card?.substring(0, 4) + "********" + currentRecordItem.value.card?.slice(-4),
  );
  const payAccount = computed(
    () =>
      currentRecordItem.value.payAccount?.substring(0, 4) + "********" + currentRecordItem.value.payAccount?.slice(-4),
  );
</script>
